<template>
  <div class="detail-work">
    <div class="search d-between top-search">
      <div class="header d-start">
        <el-dropdown trigger="click">
          <div
            class="btn d-center"
            style="background:#F5F7FA;color:#909399;font-size:14px;width:121px;height:36px;"
          >
            查看图例
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </div>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="d-start">
              <PatternsSmall :iconShow="1" style="margin-right:10px;" />完成
            </el-dropdown-item>
            <el-dropdown-item class="d-start">
              <PatternsSmall :iconShow="2" style="margin-right:10px;" />超时未完成
            </el-dropdown-item>
            <el-dropdown-item class="d-start">
              <PatternsSmall :iconShow="3" style="margin-right:10px;" />尚未完成
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="d-end">
        <div class="input d-center">
          <el-input
            class="inline-input"
            v-model="$route.query.xmmc"
            placeholder="请输入内容"
            size="medium"
            disabled
          >
            <template slot="prepend">项目名称：</template>
          </el-input>
        </div>
        <!-- size="medium" -->
        <div class="input d-center">
          <span class="select-gray d-center" @click="baba" style="width:100px;height:36px;">项目状态：</span>
          <el-select v-model="$route.query.xmzt" placeholder="请选择" disabled size="medium">
            <el-option value="新建">新建</el-option>
            <el-option value="续建">续建</el-option>
            <el-option value="交工">交工</el-option>
            <el-option value="竣工">竣工</el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- <div class="nav">
      <el-steps style="margin-top: 20px;cursor: pointer;font-size:12px;">
        <el-step
          title="可行性研究"
          @click.native="activeName = '/progress/DetailWork/ADetailsStudy'"
          :status="activeName == '/progress/DetailWork/ADetailsStudy'?'success':'wait'"
          v-if="$systemMenu['可行性研究']"
        ></el-step>
        <el-step
          title="初步设计"
          @click.native="activeName = '/progress/DetailWork/BDesign'"
          :status="activeName == '/progress/DetailWork/BDesign'?'success':'wait'"
          v-if="$systemMenu['初步设计']"
        ></el-step>
        <el-step
          title="施工图设计"
          @click.native="activeName = '/progress/DetailWork/CPlans'"
          :status="activeName == '/progress/DetailWork/CPlans'?'success':'wait'"
          v-if="$systemMenu['施工图设计']"
        ></el-step>
        <el-step
          title="要件办理"
          @click.native="activeName = '/progress/DetailWork/DRequirements'"
          :status="activeName == '/progress/DetailWork/DRequirements'?'success':'wait'"
          v-if="$systemMenu['要件办理']"
        ></el-step>
        <el-step
          title="标段管理"
          @click.native="activeName = '/progress/DetailWork/ELot'"
          :status="activeName == '/progress/DetailWork/ELot'?'success':'wait'"
          v-if="$systemMenu['标段管理']"
        ></el-step>
        <el-step
          title="技术服务单位"
          @click.native="activeName = '/progress/DetailWork/FService'"
          :status="activeName == '/progress/DetailWork/FService'?'success':'wait'"
          v-if="$systemMenu['技术服务单位']"
        ></el-step>
        <el-step
          title="第三方检测"
          @click.native="activeName = '/progress/DetailWork/GParty'"
          :status="activeName == '/progress/DetailWork/GParty'?'success':'wait'"
          v-if="$systemMenu['第三方检测']"
        ></el-step>
        <el-step
          title="合同管理"
          @click.native="activeName = '/progress/DetailWork/HContract'"
          :status="activeName == '/progress/DetailWork/HContract'?'success':'wait'"
          v-if="$systemMenu['合同管理']"
        ></el-step>
        <el-step
          title="监督手续"
          @click.native="activeName = '/progress/DetailWork/IPermit'"
          :status="activeName == '/progress/DetailWork/IPermit'?'success':'wait'"
          v-if="$systemMenu['监督手续']"
        ></el-step>
        <el-step
          title="施工许可"
          @click.native="activeName = '/progress/DetailWork/JTechnology'"
          :status="activeName == '/progress/DetailWork/JTechnology'?'success':'wait'"
          v-if="$systemMenu['施工许可']"
        ></el-step>
        <el-step
          title="施工进场"
          @click.native="activeName = '/progress/DetailWork/Kmobilization'"
          :status="activeName == '/progress/DetailWork/Kmobilization'?'success':'wait'"
        ></el-step>
      </el-steps>
    </div>-->
    <div class="main">
      <el-tabs v-model="activeName">
        <el-tab-pane label="可行性研究" name="/progress/DetailWork/ADetailsStudy"></el-tab-pane>
        <el-tab-pane label="初步设计" name="/progress/DetailWork/BDesign"></el-tab-pane>
        <el-tab-pane label="施工图设计" name="/progress/DetailWork/CPlans"></el-tab-pane>
        <el-tab-pane label="要件办理" name="/progress/DetailWork/DRequirements"></el-tab-pane>
        <el-tab-pane label="标段管理" name="/progress/DetailWork/ELot"></el-tab-pane>
        <el-tab-pane label="技术服务单位" name="/progress/DetailWork/FService"></el-tab-pane>
        <el-tab-pane label="第三方检测" name="/progress/DetailWork/GParty"></el-tab-pane>
        <el-tab-pane label="合同管理" name="/progress/DetailWork/HContract"></el-tab-pane>
        <el-tab-pane label="监督手续" name="/progress/DetailWork/IPermit"></el-tab-pane>
        <el-tab-pane label="施工许可" name="/progress/DetailWork/JTechnology"></el-tab-pane>
        <!-- <el-tab-pane label="施工进场" name="/progress/DetailWork/Kmobilization"></el-tab-pane> -->
      </el-tabs>
      <!-- <Aok v-if="activeName == 1" />
      <BDesign v-if="activeName == 2" />
      <CPlans v-if="activeName == 3" />
      <DRequirements v-if="activeName == 4" />
      <ELot v-if="activeName == 5" />
      <FContract v-if="activeName == 6" />
      <GPermit v-if="activeName == 7" />
      <Hmobilization v-if="activeName == 8" />
      <JService v-if="activeName == 9" />
      <ITechnology v-if="activeName == 10" />
      <KParty v-if="activeName == 11" />-->
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import PatternsSmall from "@/components/patternsSmall";

// import Aok from "./components/ADetailsStudy.vue";
// import BDesign from "./components/BDesign.vue";
// import CPlans from "./components/CPlans.vue";
// import DRequirements from "./components/DRequirements.vue";
// import ELot from "./components/ELot.vue";
// import FContract from "./components/FContract.vue";
// import GPermit from "./components/GPermit.vue";
// import Hmobilization from "./components/Hmobilization.vue";
// import ITechnology from "./components/ITechnology.vue";
// import JService from "./components/JService.vue";
// import KParty from "./components/KService.vue";
export default {
  props: ["nameMeta"],
  components: {
    PatternsSmall
    // Aok,
    // BDesign,
    // CPlans,
    // DRequirements,
    // ELot,
    // FContract,
    // GPermit,
    // Hmobilization,
    // ITechnology,
    // JService,
    // KParty
  },
  data() {
    return {
      name: "",
      active: "",
      activeName: null
      //  this.activeName
    };
  },
  computed: {
    router() {
      return this.$route.path;
    },
    key() {
      return this.$route.path + Math.random();
    }
  },
  methods: {
    baba() {
      this.$forceUpdate();
    }
  },
  mounted() {
    this.activeName = this.nameMeta;
  },
  watch: {
    activeName(news) {
      if (this.$route.path != news) {
        this.$router.push({
          path: news,
          query: {
            xm_id: this.$route.query.xm_id,
            xmmc: this.$route.query.xmmc,
            xmzt: this.$route.query.xmzt,
            is_sealed: this.$route.query.is_sealed
          }
        });
      }
    },
    router(news) {
      this.activeName = news;
    }
  }
};
</script>

<style scoped lang="less">
.detail-work {
  width: 100%;
  height: calc(100%);
  background: #ffffff;
  border-radius: 5px;
  padding: 10px;
  .header {
    padding: 10px 0;
    height: 50px;
    > span {
      font-size: 24px;
      font-weight: bold;
      color: #ccc;
    }
    .imgTitle {
      span {
        margin: 10px 30px;
      }
    }
  }
  .search {
    width: 100%;
    height: 60px;
    padding: 10px 0;
    position: relative;
    .input {
      width: 300px;
      margin-right: 10px;
      span {
        flex-shrink: 0;
      }
    }
  }
  .main {
    height: calc(100% - 130px);
  }
  .title-color {
    font: 16px #ccc bold;
  }
  .top-search .el-select .el-input {
    background-color: #f5f7fa !important;
  }
}
.btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  height: 50px;
}
</style>